<template>
<div class="douContainer">
     <div class="box">
     <div class="header">
	 <span>论逗</span>
	 <img src="../../../../static/img/sou.png">
	 <div class="douNav">
	 	<ul>
	 		<router-link :to="{path:'/amuse/vidio'}" tag="li" v-on:touchstart="toVidio">影视</router-link>
	 		<router-link :to="{path:'/amuse/book'}" tag="li" v-on:touchstart="toVidio">书籍</router-link>
	 		<router-link :to="{path:'/amuse/game'}" tag="li" v-on:touchstart="toVidio">游戏</router-link>
	 		<router-link :to="{path:'/amuse/music'}" tag="li" v-on:touchstart="toVidio">音乐</router-link>
	 	</ul>
	 	
	 </div>
    </div>
    </div>
    <router-view></router-view>
	
</div>
</template>
<script type="text/javascript">
     import $ from 'jquery';
	 export default{
	 	 name:'AamuseIndex',
	 	 data(){
	 	 	return {}
	 	 },
	 	 methods:{
	 	 	toVidio(event){
	 	 		$(event.target).attr('class','hoverBlue').siblings().removeClass('hoverBlue');
	 	 	
	 	 	}
	 	 }
	 }
</script>
<style scoped lang="less">
      .douContainer{background:#F0F0F0;font-size:35/75rem;
      	 .box{background:white;}
      	 .header{overflow: hidden;text-align: center;font-weight: bold;padding-top:30/75rem;
      	 	width:616/75rem;margin:0 auto;
      	 	span{margin-left:75/75rem;}
      	 	img{float:right;margin-right:50/75rem;width:41/75rem;height:41/75rem;}
      	 	.douNav{margin:35/75rem  0 auto;}
      	 	.douNav ul li{display:inline-block;width:146/75rem;text-align:center;height:60/75rem;line-height:75/75rem;padding-bottom:10/75rem;}
      	 	.hoverBlue{color:#5483C2;border-bottom:10/75rem solid #5483C2;}  
      	 }
      }
</style>